<template>

  <div class="register">
    <div>
    <el-form
      :model="ReginForm"
      ref="ReginForm"
      :rules="rule"
      class="regform"
      label-width="0">

      <h3>用户注册</h3>

      <el-form-item prop="phone">
        <el-input
          type="text"
          v-model.number="ReginForm.phone"
          placeholder="手机号码"
          >
        </el-input>
      </el-form-item>
      <!--<el-form-item prop="VerNumber">
        <el-input
          type="text"
          v-model.number="ReginForm.VerNumber"
          placeholder="验证码">
        </el-input>
      </el-form-item>-->
      <el-form-item prop="verNumber">
        <el-col :span="11">
        <el-input v-model="ReginForm.verNumber" placeholder="请输入验证码"></el-input>
        </el-col>
        <el-col :span="1">&nbsp</el-col>
        <el-col :span="8">
        <el-button class="verButton" :loading="show" @click="send">{{buttonName}}</el-button>
        </el-col>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="ReginForm.password"
          placeholder="密码">
        </el-input>
      </el-form-item>

      <el-form-item prop="confirmpassword">
        <el-input
          type="password"
          v-model="ReginForm.confirmpassword"
          placeholder="确认密码">
        </el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input
          type="text"
          v-model="ReginForm.name"
          placeholder="昵称">
        </el-input>
      </el-form-item>


      <el-form-item >
        <el-button
          type="success"
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          注册
        </el-button>
        <el-button
          type="primary"
          class="resetBtn"
          round
          @click.native.prevent="reset">
          重置
        </el-button>
        <hr>
        <p>已经有账号，马上去<span class="to" @click="tologin">登录</span></p>
      </el-form-item>

    </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      let confirmpasswordCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码是必须的'))
        } else if (value !== this.ReginForm.password) {
          return callback(new Error('两次输入的密码不一致'))
        } else {
          return callback()
        }
      }
      let telCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('电话号码是必须的'))
        } else if (!Number.isInteger(value)) {
          return callback(new Error('电话号码必须是数字'))
        } else if (value.toString().length !== 11) {
          return callback(new Error('电话号码必须是11位数字'))
        }
        else {
          callback()
        }
      }
      return {
        show:false,
        time: 600,
        buttonName:'发送验证码',
        ReginForm: {
          name: '',
          password: '',
          confirmpassword: '',
          phone:'' ,
          verNumber: '',
        },
        logining: false,
        rule: {
          name: [
            {
              required: true,
              max: 14,
              min: 5,
              message: '昵称是必须的，长度为5-14位',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              max: 32,
              min: 6,
              message: '密码是必须的,长度为6-32位',
              trigger: 'blur'
            }
          ],
          confirmpassword: [
            {
              required: true,
              validator: confirmpasswordCheck,
              trigger: 'blur'
            }
          ],
          phone: [
            {
              required: true,
              validator: telCheck,
              trigger: 'blur'
            },
            {
              pattern: /^((1[3,5,8][0-9])|(14[5,7])|(17[0,5,6,7,8])|(19[7]))\d{8}$/,
              message: '请检查手机号是否正确',
              trigger: 'blur'
            }
          ],
          verNumber: [
            {
              required: true,
              message: '验证码是必须的！',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      send(){
        this.$refs.ReginForm.validateField('phone',valid => {
          if(!valid){
            let me = this;
            me.show = true;
            let interval = window.setInterval(function() {
              me.buttonName = me.time +'秒后重新发送';
              --me.time;
              if(me.time < 0) {
                me.buttonName = "重新发送";
                me.time = 600;
                me.show = false;
                window.clearInterval(interval);
              }
            }, 1000);
            console.log('开始发送验证码！');
            let params = Object.assign({}, this.ReginForm);
            this.$api.login.regSendMsg(params).then((res) => {
              console.log(res.msg);
              if(res.code == 200){
                this.$message({
                  message: '验证码已发送！',
                  type: 'success'
                });
              }else{
                this.$message.error(res.msg);
                // this.$router.go(0);
              }
            })
          }
        });
      },
      // ...
      submit () {
        this.$refs.ReginForm.validate(valid => {
          if (valid) {
            this.logining = false
            console.log('开始写入后台数据！');
            let params = Object.assign({}, this.ReginForm);
            console.log(params);
            this.$api.login.register(params).then((res) => {
              console.log(res.msg);
              if(res.code == 200){
                this.$message({
                  message: '注册成功！',
                  type: 'success'
                });
                console.log(JSON.stringify(res.data))
                sessionStorage.setItem("user",JSON.stringify(res.data));
                this.$store.state.isLogin = true;
                this.$store.state.name = res.data.name;
                this.$store.state.img = res.data.img;
                this.$store.state.createTime = res.data.createTime;
              this.$router.push("/");
              }else{
                this.$message.error(res.msg);
                // this.$router.go(0);
              }
            })
          } else {
            console.log('submit err')
          }
        })
      },
      reset () {
        this.$refs.ReginForm.resetFields()
      },
      tologin () {
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped lang="scss">
  .register {
    margin: 20px auto;
    width: 310px;
    background: #fff;
    box-shadow: 0 0 2px #B4BCCC;
    padding: 30px 30px 0 30px;
    border-radius: 5px;
  }
  .submitBtn {
    width: 65%;
  }
  .to {
    color: #FA5555;
    cursor: pointer;
  }
  .verButton {
    width: 155px;
  }
</style>
